<template>
  <div class="ed-contactWayVo al-container">
    <div class="contactWayVo-step-left al-container-left">
      <div class="steps">
        <el-steps direction="vertical" align-center :active="step" finish-status="success">
          <el-step title="基础信息"></el-step>
          <!--          <el-step title="高级设置"></el-step>-->
          <el-step title="欢迎语"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="contactWayVo-right al-container-right-nh">
      <el-form ref="welForm0" :rules="step0Rule" :model="contactWayVo" label-width="120px">
        <div class="step-1" v-show="step === 0">

          <el-form-item label="活码名称:" prop="name">
            <el-input class="al-width-500" size="mini" v-model="contactWayVo.title" maxlength="15"
                      show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="分组:" prop="group">
            <el-select class="al-width-500" v-model="contactWayVo.groupId" placeholder="请选择分组" filterable>
              <el-option v-for="(g,i) in allGroup" :key="i" :label="g.name" :value="g.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活码类型:" prop="type">
            <el-radio v-model="contactWayVo.type" :label="1" :disabled="isEdit">单人</el-radio>
            <el-radio v-model="contactWayVo.type" :label="2" :disabled="isEdit">多人</el-radio>
          </el-form-item>
          <el-form-item label="自动通过好友:">
            <el-switch v-model="contactWayVo.skipVerify" active-color="#13ce66"/>
          </el-form-item>
          <el-form-item label="活码员工:" prop="users">
            <el-button size="mini" type="primary"
                       @click="choiceUsers">选择员工
            </el-button>
            <div class="wx-form-tag">
              <wx-link tag v-if="contactWayVo.users" v-for="(c,i) in contactWayVo.users" :key="i">{{ c.name }}</wx-link>
            </div>
          </el-form-item>
          <el-form-item label="更新备注:">
            <el-input class="al-width-500" size="mini" v-model="contactWayVo.remark" maxlength="15"
                      show-word-limit></el-input>
            <span class="al-tips-text-org">同步更新用户备注信息</span>
          </el-form-item>
          <el-form-item label="绑定标签:">
            <el-button size="mini" type="primary" @click="choiceTags">选择标签</el-button>
            <div class="wx-form-tag">
              <wx-link tag v-if="contactWayVo.tags" v-for="(c,i) in contactWayVo.tags" :key="i">{{ c.name }}</wx-link>
            </div>
          </el-form-item>
          <el-form-item label="自建备注:">
            <el-input class="al-width-500" size="mini" v-model="contactWayVo.dyRemark" maxlength="15"
                      show-word-limit></el-input>
            <span class="al-tips-text-org">不会更新用户备注信息，仅展示在「员工活码」列表页中，可当做搜索条件检索</span>
          </el-form-item>
        </div>
      </el-form>

      <!--      <el-form ref="welForm1" :rules="step1Rule" :model="contactWayVo" label-width="120px">-->
      <!--        <div class="step-2" v-show="step === 1">-->
      <!--          <el-form-item label="引导入群:">-->
      <!--            <div class="chat-set">-->
      <!--              <el-switch v-model="contactWayVo.guideJoin" active-color="#13ce66" @change="toggleGuideJoin"-->
      <!--                         :disabled="isEdit"/>-->
      <!--              <span class="al-tips-text-org">已是好友用户，可引导入群</span>-->
      <!--            </div>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="入群设置:" v-if="contactWayVo.guideJoin" prop="joinChats">-->
      <!--            <div v-for="(item,i) in contactWayVo.joinChats">-->
      <!--              <div class="chat-set-wrapper">-->
      <!--                <div class="chat-set">-->
      <!--                  <span>序号{{ i + 1 }}</span>-->
      <!--                  <el-button size="mini" type="primary" @click="choiceChat(item,i)">选择群聊</el-button>-->
      <!--                </div>-->
      <!--                <wx-link v-if="contactWayVo.joinChats.length >1"-->
      <!--                         @click.native="toggleJoinChat('remove',i)">删除-->
      <!--                </wx-link>-->
      <!--              </div>-->
      <!--              <div class="wx-form-tag" style="margin-left: 50px;">-->
      <!--                <wx-link tag v-for="(c,i) in item" :key="i">{{ c.name }}</wx-link>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--            <div style="margin-top: 20px" v-if="contactWayVo.joinChats.length < 5">-->
      <!--              <el-button size="mini" type="primary" @click="toggleJoinChat('add')">新增序号</el-button>-->
      <!--            </div>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="二维码预览:" v-if="contactWayVo.guideJoin">-->
      <!--            <div class="qr-user-img">-->
      <!--              <div class="qr-test-code">-->
      <!--                <el-image style="width:50px;height:50px" :src="previewUserIcon()" fit="fill"/>-->
      <!--              </div>-->
      <!--              <wx-file-upload file-types="png,jpg,jpeg" @success="changeUserIcon" :showFileList="false">-->
      <!--                <i class="el-icon-plus">-->
      <!--                  <div style="font-size:12px;">更换头像</div>-->
      <!--                </i>-->
      <!--              </wx-file-upload>-->
      <!--            </div>-->
      <!--            <span class="al-tips-text-red">预览二维码，非真实有效，请勿使用</span>-->
      <!--          </el-form-item>-->
      <!--        </div>-->
      <!--      </el-form>-->

      <el-form ref="welForm2" :model="welcome" label-width="120px">
        <div class="step-3" v-show="step === 1">
          <el-form-item label="欢迎语:">
            <el-input resize="none" :rows="10" type="textarea" placeholder="请输入内容"
                      v-model="welcome.text" maxlength="100" show-word-limit/>
          </el-form-item>
          <el-form-item label="欢迎语附件:">
            <wx-wel-attach ref="attach" :attachs="welcomeAttachs"></wx-wel-attach>
          </el-form-item>
        </div>
      </el-form>

      <div class="text-center">
        <el-button type="primary" v-if="step > 0" @click="--step" :loading="saveLoading">上一页</el-button>
        <el-button type="primary" v-if="step<1" @click="validateNext">下一页</el-button>
        <el-button type="primary" v-if="step===1" @click="saveQrcode" :loading="saveLoading">保存</el-button>
      </div>
    </div>

    <!--  弹窗  -->
    <div v-if="dialog.concatDiv">
      <wx-concat :single="contactWayVo.type===1" :choice-concats="contactWayVo.users"
                 :show.sync="dialog.concat"
                 @sure="qrcodeCustomers"/>
    </div>
    <div v-if="dialog.tagDiv">
      <wx-tag :choice-tags="contactWayVo.tags" :show.sync="dialog.tags" @sure="bindTagSure"/>
    </div>
    <wx-chat :current-chats="currentChats" :show.sync="dialog.chat" @sure="bindChatSure"/>
  </div>
</template>

<script>
import WxConcat from "@/components/wxqy/wxConcat/wxConcat";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import WxTag from "@/components/wxqy/wxTag/wxTag";
import WxChat from "@/components/wxqy/wxChat/wxChat";
import WxFileUpload from "@/components/wxqy/wxFileUpload/wxFileUpload";
import WxWelAttach from "@/components/wxqy/wxWelAttach/wxWelAttach";
import {welcom_step0_rules} from "@/api/wxqy/const";
import {clearFormItemValidate} from "@/utils/validate";
import {contactWay, contactWayAdd, wayGroupList} from "@/api/wxqy/contactWay";

/**
 * welcome:{
 *   text:'',
 *   others:[{type:'',content:[]}]
 * }
 */
export default {
  name: "edit-contactWayVo",
  components: {WxWelAttach, WxFileUpload, WxChat, WxTag, WxLink, WxConcat},
  data() {
    return {
      saveLoading: false,
      isEdit: false,
      step: 0,
      rules: {},
      allGroup: [{id: 0, name: '默认分组'}],
      currentChats: [],
      currentChatIndex: 0,
      step0Rule: welcom_step0_rules,
      step1Rule: {
        joinChats: [{required: true, trigger: 'change', validator: this.guideValidate}]
      },
      dialog: {concatDiv: false, concat: false, tagDiv: false, tags: false, chat: false},
      contactWayVo: {
        id: 0, groupId: 0, type: 1, user: null, scene: 2, skipVerify: true,
        guideJoin: false, joinChats: []
      },
      welcome: {},
      welcomeAttachs: []
    }
  },
  methods: {
    guideValidate(rule, chats, callback) {
      if (this.contactWayVo.guideJoin) {
        if (chats && chats.length) {
          for (let i = 0; i < chats.length; i++) {
            if (!chats[i].length) {
              return callback(new Error('序号' + (i + 1) + '未选择群'))
            }
          }
          return callback()
        }
        return callback(new Error('序号1' + '未选择群'))
      }
      callback()
    },
    validateNext() {
      let ref = this.$refs[`welForm${this.step}`]
      ref.validate(valid => {
        if (valid) {
          this.step++
        }
      })
    },
    saveQrcode() {
      this.saveLoading = true
      this.welcome.others = this.$refs.attach.findAttachements()
      let params = {contactWay: this.contactWayVo, welcome: this.welcome}
      contactWayAdd(params)
        .then(e => {
            this.$message.success('保存成功~')
            this.$router.push({path: 'list'})
          }
        ).catch(() => {
        this.saveLoading = false
      })
    },
    qrcodeCustomers(r) {
      this.contactWayVo.users = r
      clearFormItemValidate(this.$refs.welForm0, 'users')
    },
    bindTagSure(tags) {
      this.contactWayVo.tags = tags
    },
    bindChatSure(chats) {
      this.contactWayVo.joinChats[this.currentChatIndex] = chats
    },
    toggleGuideJoin(status) {
      this.contactWayVo.guideJoin = status
      if (status) {
        if (!this.contactWayVo.joinChats) {
          this.contactWayVo.joinChats = []
        }
        if (this.contactWayVo.joinChats.length === 0) {
          this.contactWayVo.joinChats.push([])
        }
      }
    },
    toggleJoinChat(type, remove) {
      if (type === 'add') {
        this.contactWayVo.joinChats.push([])
      } else {
        this.contactWayVo.joinChats.splice(remove, 1)
      }
    },
    choiceChat(chats, currentIndex) {
      this.currentChats = chats
      this.currentChatIndex = currentIndex
      this.dialog.chat = true
    },
    changeUserIcon(file) {
      this.$set(this.contactWayVo, 'userIcon', file.url)
    },
    previewUserIcon() {
      if (this.contactWayVo.userIcon) {
        return this.contactWayVo.userIcon
      }
      return require('../../../../assets/images/qw.png')
    },
    choiceUsers() {
      this.dialog.concatDiv = true
      this.dialog.concat = true
    },
    choiceTags() {
      this.dialog.tagDiv = true
      this.dialog.tags = true
    },
    initContactWayGroup() {
      wayGroupList().then(e => {
        this.allGroup = [...this.allGroup, ...(e.data || [])]
      })
    },
    initQrcode(id) {
      contactWay(id).then(e => {
        this.contactWayVo = e.data.contactWay
        this.welcome = e.data.welcome || {}
        this.welcomeAttachs = this.welcome.others || []
        console.log(this.welcomeAttachs)
      })
    },
    async initContactWay(id) {
      await this.initContactWayGroup()
      if (id) {
        this.isEdit = true
        await this.initQrcode(id)
      }
    }
  },
  created() {
    let id = this.$route.query.id || 0
    this.contactWayVo.id = id
    this.initContactWay(id)
  }
}
</script>

<style scoped lang="scss">
@import "../../../../assets/styles/common";

@mixin qrBackground() {
}

.ed-contactWayVo {
  padding: 20px;

  .contactWayVo-step-left {
    height: 80vh;
    width: 200px;
    position: sticky;
    top: 20px;

    .steps {
      width: 120px;
      margin: auto;
      height: 100%;
    }
  }

  .contactWayVo-right {
    min-height: 100%;
  }

  .wx-form-tag {
    max-height: 100px;
    overflow-y: auto;
  }

  .chat-set-wrapper {
    @include flex-between;
  }

  .chat-set {
    @include flex-start;

    span {
      margin: 0 10px;
    }
  }
}

.qr-user-img {
  @include flex-start;
}

.qr-test-code {
  @include flex-center;
  width: 200px;
  height: 200px;
  background: url("../../../../assets/images/qwcode.png") no-repeat;
  background-size: 200px 200px;

  .qr-code-icon {
    width: 50px;
    height: 50px;
    background: url("../../../../assets/images/qw.png") no-repeat;
    background-size: 50px 50px;
  }
}
</style>
